<html>
  <head>
    <title>YouCube - The Blog for Cube Puzzlers</title>

    <script type="text/javascript">
      // Custom Date function to display a date in MM/DD/YYYY format
      Date.prototype.shortFormat = function() {
        return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
      }

      // Blog object constructor
      function Blog(body, date) {
        // Assign the properties
        this.body = body;
        this.date = date;
      }

      // Return a string representation of the blog entry
      Blog.prototype.toString = function() {
        return "[" + this.date.shortFormat() + "] " + this.body;
      };

      // Return a formatted HTML representation of the blog entry
      Blog.prototype.toHTML = function(highlight) {
        // Use a gray background as a highlight, if specified
        var blogHTML = "";
        blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";

        // Generate the formatted blog HTML code
        blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body +
          "<br /><em>" + this.signature + "</em></p>";
        return blogHTML;
      };

      // See if the blog body contains a string of text
      Blog.prototype.containsText = function(text) {
        return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
      };

      // Set the blog-wide signature
      Blog.prototype.signature = "by Puzzler Ruby";

      // Global array of blog entries
      var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
                   new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),
                   new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
                   new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")),
                   new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),
                   new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),
                   new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")) ];

      // Show the list of blog entries
      function showBlog(numEntries) {
        // First sort the blog in reverse chronological order (most recent first)
        blog.sort(function(blog1, blog2) { return blog2.date - blog1.date; });

        // Adjust the number of entries to show the full blog, if necessary
        if (!numEntries)
          numEntries = blog.length;

        // Show the blog entries
        var i = 0, blogListHTML = "";
        while (i < blog.length && i < numEntries) {
          blogListHTML += blog[i].toHTML(i % 2 == 0);
          i++;
        }

        // Set the blog HTML code on the page
        document.getElementById("blog").innerHTML = blogListHTML;
      }

      // Search the list of blog entries for a piece of text
      function searchBlog() {
        var searchText = document.getElementById("searchtext").value;
        for (var i = 0; i < blog.length; i++) {
          // See if the blog entry contains the search text
          if (blog[i].containsText(searchText)) {
            alert(blog[i]);
            break;
          }
        }

        // If the search text wasn't found, display a message
        if (i == blog.length)
          alert("Sorry, there are no blog entries containing the search text.");
      }

      // Display a randomly chosen blog entry
      function randomBlog() {
        // Pick a random number between 0 and blog.length - 1
        var i = Math.floor(Math.random() * blog.length);
        alert(blog[i]);
      }
    </script>
  </head>

  <body onload="showBlog(5);">
    <h3>YouCube - The Blog for Cube Puzzlers</h3>
    <img src="cube.png" alt="YouCube" />
    <input type="button" id="search" value="Search the Blog" onclick="searchBlog();" />
    <input type="text" id="searchtext" name="searchtext" value="" />
    <div id="blog"></div>
    <input type="button" id="showall" value="Show All Blog Entries" onclick="showBlog();" />
    <input type="button" id="viewrandom" value="View a Random Blog Entry" onclick="randomBlog();" />
  </body>
</html>
